<template>
	<view class="body">
		<!-- <view class="topLine" :style="{height: topBar+'px'}"></view> -->
		<view class="nav" id="nav">
			<view>
				<!-- 为兼容微信小程序,图片路径需要使用如下绝对路径 -->
				<u-image src="/static/images/financialReport/goBack.png" width="40rpx" height="40rpx" @click="gotoBack()"></u-image>
			</view>
		</view>
		<view class="top_head">
			<view class="text_des">
				<text class="month_num">{{nowTime.month}}</text>
				<text class="month_text">月</text>
				<text class="month_year">{{nowTime.year}}</text>
				<text class="point">.</text>
				<text class="title">财务报告</text>
			</view>
			<view class="top_desc">
				<view class="text-gray">结余</view>
				<view class="remaining">{{myWallet.remaining}}</view>
				<view class="head_block">
					<view class="flex_1">
						<text class="text-gray">支出</text>
						<text class="text_green">{{myWallet.expend}}</text>
					</view>
					<view class="flex_1">
						<text class="text-gray">收入</text>
						<text class="income">{{myWallet.income}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="row_block">
				<view class="the_title" style="justify-content: space-between;">
					<view class="left_title">
						<view class="title_icon"></view>
						<text class="title-text">历史趋势</text>
					</view>
					<view class="right_btn">
						<view v-for="(item,index) in historyBtn" :key="index" :class="item.state ? 'active_btn':''"
							@click="changeHistoryBtn(item.type)">{{item.name}}</view>
					</view>
				</view>
				<view class="charts-box" style="height: 200px;">
					<qiun-data-charts type="line" canvasId="finance_a" :canvas2d="isCanvas2d" :resshow="delayload"
						:opts="{xAxis:{itemCount:12,disableGrid:true},yAxis:{disableGrid:true,data:[{disabled:true}]}}"
						:chartData="historyData" />
				</view>
			</view>
			<view class="row_block">
				<view class="the_title">
					<view class="title_icon"></view>
					<text class="title-text">钱都去哪了</text>
				</view>
				<view v-if="delayload" class="charts-box">
					<qiun-data-charts type="ring" canvasId="finance_b" :canvas2d="isCanvas2d" :resshow="delayload"
						:opts="{padding:[15,0,4,0],legend:{position: 'bottom'},title:{name: expendCount},subtitle: {name: '支出',fontSize:'20'}}"
						:chartData="expendDetail" />
				</view>
				<view class="the_title">
					<view class="title_icon"></view>
					<text class="title-text">支出单笔最贵</text>
				</view>
				<view class="extend_rank">
					<view class="rank_item" v-for="(item,index) in extendRank" :key="index">
						<image :src="getImage(index)" mode="widthFix"></image>
						<text class="name">{{item.name}}</text>
						<text class="desc">{{item.desc}}</text>
						<text class="text_green money">{{item.money}}</text>
					</view>
				</view>
			</view>
			<view class="row_block">
				<view class="the_title">
					<view class="title_icon"></view>
					<text class="title-text">{{nowTime.month}}月明细</text>
				</view>
				<view class="detail_list">
					<view v-for="(item,index) in detail_list" :key="index" class="detail_item">
						<view>
							<view class="font-middle">{{item.date}}</view>
							<view class="font-small">{{item.time}}</view>
						</view>
						<view class="icon">
							<view class="icon-image">
								<!-- 为兼容微信小程序,图片路径需要使用如下绝对路径 -->
								<u-image v-if="item.type == 'income'" src="/static/images/financialReport/income.png" width="42px" height="42px"></u-image>
								<u-image v-else="item.type == 'income'" src="/static/images/financialReport/expend.png" width="42px" height="42px"></u-image>
							</view>
						</view>
						<view class="right_content">
							<view class="money">{{item.type == 'income'?'+':'-'}}{{item.money}}</view>
							<view class="text-gray font-middle">{{item.desc}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="end_block">
				<view class="the_title" style="margin-bottom: 40rpx;">
					<view class="title_icon"></view>
					<text class="title-text">我的支出水平</text>
				</view>
				<view class="level_bar">
					<view v-for="(item,index) in extend_level_bar" :key="index" :style="{width:item.width}"
						:class="item.state ? 'text_green font-middle':''">{{item.name}}</view>
				</view>
				<view class="level_bar">
					<view v-for="(item,index) in extend_level_bar" :key="index" :style="{width:item.width}"
						:class="item.state ? 'active_bar':'default_bar'"></view>
				</view>
				<view class="level_bar">
					<view v-for="(item,index) in extend_level_bar" :key="index" :style="{width:item.width}"
						:class="item.state ? 'text_green font-middle':''">{{item.range}}</view>
				</view>
				<view class="extend_message">
					<!-- 为兼容微信小程序,图片路径需要使用如下绝对路径 -->
					<u-image src="/static/images/financialReport/message.png" width="30rpx" height="30rpx"></u-image>
					<view>
						“ 我的支出水平已超过
						<text>{{extend_morethan}}</text>
						的乡镇居民。 ”
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let _now = new Date();
	let now_time = {};
	now_time.year = _now.getFullYear()
	now_time.month = _now.getMonth() + 1
	now_time.day = _now.getDay()
	export default {
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		data() {
			return {
				info: {
					userInfo: {
						name: "大便超人"
					},
				}, //用户数据
				scrollHeight: "600px", //数据展示体高度
				isCanvas2d: true,
				historyData: {},
				dataOne: {
					"expend": {
						"categories": [
							"1月",
							"2月",
							"2月",
							"4月",
							"5月"
						],
						"series": [{
							"name": "支出情况",
							"data": [1201, 2501.5, 985, 1760, 2013.85],
							"type": "line",
							"style": "curve",
							"color": "#4ECDB6",
							"unit": ""
						}],
						"yAxis": [{
							"calibration": true,
							"position": "left",
							"title": "单位/元",
							"titleFontSize": 12,
							"unit": "",
							"tofix": 0,
							"min": 0,
							"disableGrid": true
						}]
					},
					"income": {
						"categories": [
							"1月",
							"2月",
							"2月",
							"4月",
							"5月"
						],
						"series": [{
							"name": "收入情况",
							"data": [1601, 1840.5, 1900, 1760, 1500.85],
							"type": "line",
							"style": "curve",
							"color": "#4ECDB6",
							"unit": ""
						}],
						"yAxis": [{
							"calibration": true,
							"position": "left",
							"title": "单位/元",
							"titleFontSize": 12,
							"unit": "",
							"tofix": 0,
							"min": 0,
							"disableGrid": true
						}]
					},
					"remaining": {
						"categories": [
							"1月",
							"2月",
							"2月",
							"4月",
							"5月"
						],
						"series": [{
							"name": "结余情况",
							"data": [815, 712.5, 378, 450, 600.85],
							"type": "line",
							"style": "curve",
							"color": "#4ECDB6",
							"unit": ""
						}],
						"yAxis": [{
							"calibration": true,
							"position": "left",
							"title": "单位/元",
							"titleFontSize": 12,
							"unit": "",
							"tofix": 0,
							"min": 0,
							"disableGrid": true
						}]
					}
				},
				expendDetail: {
					"series": [{
						"data": [{
								"name": "住房相关",
								"value": 3200,
								"color": "#4DCCB3"
							},
							{
								"name": "食品酒水",
								"value": 1020,
								"color": "#5A77EC"
							},
							{
								"name": "娱乐休闲",
								"value": 500,
								"color": "#4E94EC"
							},
							{
								"name": "交流通讯",
								"value": 214.5,
								"color": "#4FD4EB"
							},
							{
								"name": "其他",
								"value": 320.13,
								"color": "#B5ED21"
							}
						]
					}]
				},
				expendCount: 0,
				delayload: false,
				nowTime: {
					year: now_time.year,
					month: now_time.month,
					day: now_time.day
				},
				historyBtn: [{
						name: "支出",
						state: 1,
						type: "expend"
					},
					{
						name: "收入",
						state: 0,
						type: "income"
					},
					{
						name: "结余",
						state: 0,
						type: "remaining"
					},
				],
				myWallet: {
					remaining: 3000.34,
					expend: 5240.32,
					income: 8240.66
				},
				extendRank: [{
						name: "购买衣服",
						desc: now_time.month + "月6日12:34-小寨",
						money: "422.12"
					},
					{
						name: "生活用品",
						desc: now_time.month + "月12日21:34-万象城",
						money: "318.00"
					},
					{
						name: "食品食材",
						desc: now_time.month + "月1日21:34-万象城",
						money: "289.50"
					},
				],
				extend_level_bar: [{
						name: "低消费",
						range: "<2000元",
						width: "20%"
					},
					{
						name: "中间消费",
						range: "2000-5000元",
						width: "35%"
					},
					{
						name: "较高消费",
						range: "5000-8000元",
						width: "25%",
						state: 1
					},
					{
						name: "高消费",
						range: ">8000元",
						width: "20%"
					},
				],
				extend_morethan: "68%",
				detail_list: [{
						date: now_time.month + "-01",
						time: "11:01",
						"type": "extend",
						money: "10.00",
						desc: "银行卡转出"
					},
					{
						date: now_time.month + "-01",
						time: "13:45",
						"type": "income",
						money: "18.00",
						desc: "银行卡收入"
					},
					{
						date: now_time.month + "-02",
						time: "06:21",
						"type": "extend",
						money: "123.45",
						desc: "信用卡转出"
					},
					{
						date: now_time.month + "-03",
						time: "07:38",
						"type": "income",
						money: "23.00",
						desc: "银行卡收入"
					},
					{
						date: now_time.month + "-08",
						time: "16:28",
						"type": "extend",
						money: "23.56",
						desc: "信用卡转出"
					},
					{
						date: now_time.month + "-09",
						time: "15:25",
						"type": "income",
						money: "850.12",
						desc: "银行卡收入"
					},
					{
						date: now_time.month + "-09",
						time: "18:52",
						"type": "income",
						money: "1.88",
						desc: "银行卡收入"
					},
					{
						date: now_time.month + "-11",
						time: "21:12",
						"type": "extend",
						money: "220.21",
						desc: "银行卡转出"
					},
					{
						date: now_time.month + "-12",
						time: "13:08",
						"type": "income",
						money: "32.28",
						desc: "银行卡收入"
					},
					{
						date: now_time.month + "-12",
						time: "12:41",
						"type": "extend",
						money: "122.12",
						desc: "信用卡转出"
					},
					{
						date: now_time.month + "-13",
						time: "17:21",
						"type": "income",
						money: "10.00",
						desc: "银行卡收入"
					},
				]
			};
		},
		watch: {
			"historyBtn": {
				deep: true,
				handler: function(newVal, oldVal) {
					this.filterHistoryData();
				}
			}
		},
		methods: {
			async getData() {
				uni.showLoading();
				this.filterHistoryData();
				for (let i = 0; i < this.expendDetail.series.length; i++) {
					this.expendDetail.series[i].format = "pieDemo"
				}
				let length = this.expendDetail.series[0].data.length
				for (let i = 0; i < length; i++) {
					this.expendCount += this.expendDetail.series[0].data[i].value
				}
				await setTimeout(() => {
					this.delayload = true;
					uni.hideLoading();
				}, 1000)
			},
			changeHistoryBtn(type) {
				for (let i = 0; i < this.historyBtn.length; i++) {
					if (this.historyBtn[i].type == type) {
						this.historyBtn[i].state = 1
					} else {
						this.historyBtn[i].state = 0
					}
				}
			},
			filterHistoryData() {
				let type = this.historyBtn.filter(x => x.state == 1)[0].type;
				switch (type) {
					case "expend":
						this.historyData = this.dataOne.expend;
						break;
					case "income":
						this.historyData = this.dataOne.income;
						break;
					case "remaining":
						this.historyData = this.dataOne.remaining;
						break;
				}
			},
			gotoBack() {
				uni.switchTab({
					url: '/pages/business/index'
				});
			},
			getImage(index) {
				switch (index) {
					case 0:
						return "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg";
						break;
					case 1:
						return "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg";
						break;
					case 2:
						return "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg";
						break;
				}
			}
		},
		onReady() {
			this.getData()
		}
	}
</script>

<style scoped lang="scss">
	.body {
		height: 100%;
		background-color: #560594;
		margin: 0;
		padding-bottom: 20rpx;

		li {
			list-style-type: none;
		}

		.nav {
			position: fixed;
			top: 80rpx;
			left: 10rpx;
		}

		.text_green {
			color: #4ECDB6;
		}

		.main {
			width: 100%;
			padding: 0 10rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.detail_list {
				height: 700rpx;
				overflow: auto;
				color: #9E9E9E;
				margin-top: 10rpx;

				.detail_item {
					display: flex;
					margin: 20rpx 30rpx;
					align-items: center;

					.icon {
						margin-left: 80rpx;
						text-align: center;
						
						.icon-image {
							margin-left: 50rpx;
						}
					}

					.right_content {
						width: 50%;
						text-align: center;
					}

					.icon-income {
						color: #4AABF9;
					}

					.icon-expend {
						color: #E45521;
					}

					.money {
						color: #000;
					}
				}
			}

			.extend_message {
				margin-top: 20rpx;
				color: #909399;
				display: flex;
				align-items: center;

				text {
					color: #ff9900;
				}
			}

			.level_bar {
				width: 100%;
				height: 40rpx;
				border-radius: 40rpx;
				overflow: hidden;
				display: flex;
				color: #909399;
				font-size: 20rpx;
				text-align: right;
				line-height: 40rpx;

				view {
					border-right: 2rpx solid #fff;
					position: relative;
				}

				.name {
					position: absolute;
					top: -30rpx;
					right: -40rpx;
				}

				.range {
					position: absolute;
					bottom: 30rpx;
					right: -40rpx;
				}

				.default_bar {
					background-color: #A0DFCD;
				}

				.active_bar {
					background-color: #02AE7A;
				}
			}

			.right_btn {
				float: right;
				display: flex;
				color: #909399;
				font-size: 22rpx;

				view {
					line-height: 50rpx;
					height: 50rpx;
					margin: 0 20rpx;
				}

				.active_btn {
					padding: 0rpx 20rpx;
					border: 1px solid #909399;
					border-radius: 40rpx;
				}
			}

			.end_block {
				width: 100%;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 12rpx;
				position: relative;
				padding: 20rpx;
			}

			.row_block {
				width: 100%;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 12rpx;
				position: relative;
				padding: 20rpx;

				&::after {
					content: "";
					height: 0px;
					width: 92%;
					position: absolute;
					transform: translateX(-50%);
					left: 50%;
					bottom: 0;
					border-top: 1px dashed #909399;
				}
			}

			.the_title {
				display: flex;
				align-items: center;

				.left_title {
					display: flex;
					align-items: center;
				}

				.title_icon {
					background-color: #7E7E7E;
					height: 40rpx;
					width: 10rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					font-size: 16px;
					font-weight: 600;
				}

				.title-text {
					font-size: 32rpx;
					font-weight: 600;
				}
			}

			.extend_rank {
				width: 100%;
				// background-color: #F5F5F5;
				box-sizing: border-box;
				padding: 15rpx;
				margin-top: 30rpx;

				.rank_item {
					width: 100%;
					margin: 20rpx 0;
					box-sizing: border-box;
					display: flex;
					font-size: 26rpx;
					justify-content: space-between;
					align-items: center;

					image {
						width: 10%;
					}

					text {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						display: block;
					}

					.name {
						margin: 0 10rpx;
						color: #7D7D7D;
						width: 20%;
					}

					.desc {
						width: 50%;
						color: #909399;
					}

					.money {
						width: 20%;
						text-align: right;
					}
				}
			}
		}

		.top_head {
			height: 435rpx;
			width: 100%;
			padding: 110rpx 10rpx 0rpx 10rpx;
			background: url("https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e9420bcd-26cd-4faf-b47a-9949982f7c41/0edf7889-12cb-4151-94b7-a2c12d27108a.jpg") no-repeat center 0px;
			background-size: 100% 100%;
			box-sizing: border-box;

			.top_desc {
				width: 100%;
				border-radius: 20rpx;
				background-color: #fff;
				margin-top: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.text-gray {
					font-size: 28rpx;
					color: #909399;
					margin-right: 10rpx;
				}

				.remaining {
					font-size: 46rpx;
				}

				.flex_1 {
					flex: 1;
				}

				.head_block {
					margin-top: 20rpx;
					display: flex;
					flex-direction: row;

					.income {
						color: #E34B5E;
					}
				}
			}

			.text_des {
				height: 100rpx;
				color: #fff;
				font-weight: 900;
				position: relative;
				margin-left: 60rpx;

				text {
					display: inline-block;
					height: 100%;
				}

				.month_num {
					font-size: 90rpx;
				}

				.month_text {
					font-size: 56rpx;
				}

				.month_year {
					font-size: 22rpx;
					position: absolute;
					left: 60rpx;
					top: 20rpx;
				}

				.point {
					font-size: 40rpx;
				}

				.title {
					font-size: 40rpx;
				}
			}
		}
	}
</style>
